import React, { Component } from 'react'
import { connect } from 'react-redux'
import {addPerson} from '../../redux/actions/person'

class Person extends Component {
  add=()=>{
    const username=this.username.value
    const age=this.age.value*1
    this.props.addPerson({username,age})
  }
  render() {
    return (
      <div>
        <h1>上方组件和为{this.props.count}</h1>
        <input type="text" placeholder='姓名' ref={c=>this.username=c}/>&nbsp;
        <input type="text" placeholder='年龄' ref={c=>this.age=c} />&nbsp;
        <button onClick={this.add}>添加</button>
        <ul>
          {
           this.props.person.map((val,index)=>{
            return (
              <li key={index}>{val.username}:{val.age}</li>
            )
           })
          }
        </ul>
      </div>
    )
  }
}
export default connect(
  state=>({
    count:state.sum,
    person:state.person_array
  }),
  {
    addPerson
  }
)(Person)
